<template>
  <div>
    <CodeCard v-bind="btnDesc">
      <sdn-select v-model="value" placeholder="请选择">
        <sdn-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></sdn-option>
      </sdn-select>
      <template #annotation></template>
    </CodeCard>
  </div>
</template>

<script>


export default {
  components: {
    
  },
  data() {
    return {
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: ''
    }
  },
  setup() {
    const btnDesc = {
      title: "Select 选择器",
      describe: "当选项过多时，使用下拉菜单展示并选择内容。",
      codeBlock: `<sdn-select v-model="value" placeholder="请选择">
        <sdn-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></sdn-option>
      </sdn-select>`,
      attrs: [
        {
          "name": "value / v-model",
          "describe": "绑定值",
          "type": "boolean / string / number",
          "emun": "—",
          "default": "—"
        }, {
          "name": "multiple",
          "describe": "是否多选",
          "type": "boolean",
          "emun": "—",
          "default": "FALSE"
        }, {
          "name": "disabled",
          "describe": "是否禁用",
          "type": "boolean",
          "emun": "—",
          "default": "FALSE"
        }, {
          "name": "value-key",
          "describe": "作为 value 唯一标识的键名，绑定值为对象类型时必填",
          "type": "string",
          "emun": "—",
          "default": "value"
        }, {
          "name": "size",
          "describe": "输入框尺寸",
          "type": "string",
          "emun": "medium/small/mini",
          "default": "—"
        }, {
          "name": "clearable",
          "describe": "是否可以清空选项",
          "type": "boolean",
          "emun": "—",
          "default": "FALSE"
        }, {
          "name": "collapse-tags",
          "describe": "多选时是否将选中值按文字的形式展示",
          "type": "boolean",
          "emun": "—",
          "default": "FALSE"
        }, {
          "name": "multiple-limit",
          "describe": "多选时用户最多可以选择的项目数，为 0 则不限制",
          "type": "number",
          "emun": "—",
          "default": "0"
        }, {
          "name": "name",
          "describe": "select input 的 name 属性",
          "type": "string",
          "emun": "—",
          "default": "—"
        }, {
          "name": "autocomplete",
          "describe": "select input 的 autocomplete 属性",
          "type": "string",
          "emun": "—",
          "default": "off"
        }, {
          "name": "auto-complete",
          "describe": "下个主版本弃用",
          "type": "string",
          "emun": "—",
          "default": "off"
        }, {
          "name": "placeholder",
          "describe": "占位符",
          "type": "string",
          "emun": "—",
          "default": "请选择"
        }, {
          "name": "filterable",
          "describe": "是否可搜索",
          "type": "boolean",
          "emun": "—",
          "default": "FALSE"
        }, {
          "name": "allow-create",
          "describe": "是否允许用户创建新条目，需配合 filterable 使用",
          "type": "boolean",
          "emun": "—",
          "default": "FALSE"
        }, {
          "name": "filter-method",
          "describe": "自定义搜索方法",
          "type": "function",
          "emun": "—",
          "default": "—"
        }, {
          "name": "remote",
          "describe": "是否为远程搜索",
          "type": "boolean",
          "emun": "—",
          "default": "FALSE"
        }, {
          "name": "remote-method",
          "describe": "远程搜索方法",
          "type": "function",
          "emun": "—",
          "default": "—"
        }, {
          "name": "loading",
          "describe": "是否正在从远程获取数据",
          "type": "boolean",
          "emun": "—",
          "default": "FALSE"
        }, {
          "name": "loading-text",
          "describe": "远程加载时显示的文字",
          "type": "string",
          "emun": "—",
          "default": "加载中"
        }, {
          "name": "no-match-text",
          "describe": "搜索条件无匹配时显示的文字，也可以使用slot=\"empty\"设置",
          "type": "string",
          "emun": "—",
          "default": "无匹配数据"
        }, {
          "name": "no-data-text",
          "describe": "选项为空时显示的文字，也可以使用slot=\"empty\"设置",
          "type": "string",
          "emun": "—",
          "default": "无数据"
        }, {
          "name": "popper-class",
          "describe": "Select 下拉框的类名",
          "type": "string",
          "emun": "—",
          "default": "—"
        }, {
          "name": "reserve-keyword",
          "describe": "多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词",
          "type": "boolean",
          "emun": "—",
          "default": "FALSE"
        }, {
          "name": "default-first-option",
          "describe": "在输入框按下回车，选择第一个匹配项。需配合 filterable 或 remote 使用",
          "type": "boolean",
          "emun": "-",
          "default": "FALSE"
        }, {
          "name": "popper-append-to-body",
          "describe": "是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false",
          "type": "boolean",
          "emun": "-",
          "default": "TRUE"
        }, {
          "name": "automatic-dropdown",
          "describe": "对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单",
          "type": "boolean",
          "emun": "-",
          "default": "FALSE"
        }],
      events: [{"name": "change", "describe": "选中值发生变化时触发", "params": "目前的选中值"}, {
        "name": "visible-change",
        "describe": "下拉框出现/隐藏时触发",
        "params": "出现则为 true，隐藏则为 false"
      }, {"name": "remove-tag", "describe": "多选模式下移除tag时触发", "params": "移除的tag值"}, {
        "name": "clear",
        "describe": "可清空的单选模式下用户点击清空按钮时触发",
        "params": "—"
      }, {"name": "blur", "describe": "当 input 失去焦点时触发", "params": "(event: Event)"}, {
        "name": "focus",
        "describe": "当 input 获得焦点时触发",
        "params": "(event: Event)"
      }],
      slots: [{"name": "—", "describe": "Option 组件列表"}, {
        "name": "prefix",
        "describe": "Select 组件头部内容"
      }, {"name": "empty", "describe": "无选项时的列表"}],
      methods: [{"name": "focus", "describe": "使 input 获取焦点", "params": "-"}, {
        "name": "blur",
        "describe": "使 input 失去焦点，并隐藏下拉框",
        "params": "-"
      }]
    };
    return {
      btnDesc,
    };
  },
};
</script>

<style scoped>
.demo {
  margin-bottom: 0.1rem;
  max-width: 50%;
}
</style>
